<template>
  <div id="bottom">
    <ul class="bottom-ul"> 
      <router-link  to="/home" tag="li">
        <div class="index">
          <i class="" v-if="active ==='home'">
            <img class="quan_pic fl" src="../../static/img/active_home.png">
          </i>
          <i class="" v-else> 
             <img class="quan_pic fl" src="../../static/img/common_home.png">
          </i>
        </div>
        <span>首页</span>
      </router-link>

      <router-link to="/classify" tag="li">
        <div class="index">
          <i class=""  v-if="active ==='classify'">
            <img class="quan_pic fl" src="../../static/img/active_groom.png">
          </i>
          <i class="" v-else>
            <img class="quan_pic fl" src="../../static/img/common_groom.png">
          </i>
        </div>
        <span>推荐</span>
      </router-link>

      <router-link to="/news" tag="li">
        <div class="index">
          <i class="" v-if="active ==='news'">
            <img class="quan_pic fl" src="../../static/img/active_super.png">
          </i>
          <i class="" v-else>
            <img class="quan_pic fl" src="../../static/img/common_super.png">
          </i>
        </div>
        <span>超级搜</span>
      </router-link>
      <router-link to="/zhuanti" tag="li">
        <div class="index">
          <i class=""  v-if="active ==='zhuanti'">
            <img class="quan_pic fl" src="../../static/img/active_groom.png">
          </i>
          <i class="ic"  v-else>
             <img class="quan_pic fl" src="../../static/img/common_groom.png">
          </i>
        </div>
        <span>专题</span>
      </router-link>

       <router-link to="/my" tag="li">
        <div class="index">
          <i class=""  v-if="active ==='my'">
            <img class="quan_pic fl" src="../../static/img/active_my.png">
          </i>
          <i class=""  v-else>
            <img class="quan_pic fl" src="../../static/img/common_my.png">
          </i>
        </div>
        <span>我的</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        active:'home',
      }
    },
    mounted(){
      this.active = this.$route.path.slice(1);
    }
  }
</script>

<style lang="stylus" scoped>
  .index{
    margin-bottom -.2rem
  }
  #bottom
    width: 100%;
    // height: 1.4rem;
    background: yellow;
    position: fixed;
    bottom: 0;
    color: #666
    background white
    .bottom-ul
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top -.2rem
      height: 1.45rem;
      li
        width 25%
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align center
        span
          font-size .3rem
        i 
          // font-size .15rem
          display inline-block;
          width .6rem;
          height .6rem;
          img 
            width 100%;
            height  100%;
      .router-link:hover,.router-link-active
        color: #ff4040;
</style>
